<!-- map-container -->
<div class="map-container" ng-controller="MasterCtrl">

  <div class="left-nav">
    <!-- map-selector -->
<!--     <map-selector >
  <selector-header></selector-header>
  <selector-content>
    <div class="option-block">
      <span class="bar-header">日期范围:</span>
      <div class="bar-content">
        <label ng-repeat="date in dateList" class="nxt-radio" ng-class="{'checked': option.dateType == date.value}">
          <input type="radio" ng-model="option.dateType" value="{{date.value}}">
          <span>{{date.name}}</span>
        </label>
        
        <div ng-show="option.dateType=='custom'">
          <input type="date" class="nxt-input" ng-model="option.startDate">
          到
          <input type="date" class="nxt-input" ng-model="option.endDate">
        </div>
      </div>
    </div>
    <div class="option-block">
      <span class="bar-header">星期范围:</span>
      <div class="bar-content">
        <label class="nxt-checkbox" ng-repeat="week in weekList" ng-class="{'checked': haveWeek(week.value)}">
          <input type="checkbox" ng-click="checkWeek(week.value)"><span>{{week.name}}</span>
        </label>
      </div>
    </div>
    <div class="option-block">
      <span class="bar-header">时间范围:</span>
      <div class="bar-content">
        <label ng-repeat="time in timeList" class="nxt-radio" ng-class="{'checked': option.hourType == time.name}">
          <input type="radio" ng-model="option.hourType" value="{{time.name}}">
          <span>{{time.name}}</span>
        </label>

        <div ng-show="option.hourType=='自选时间'">
          <select ng-model="option.startHour" class="nxt-input">
            <option ng-repeat="hour in hourList" value="{{hour}}">{{hour}}时</option>
          </select>
          到
          <select ng-model="option.endHour" class="nxt-input">
            <option ng-repeat="hour in hourList" value="{{hour}}">{{hour}}时</option>
          </select>
        </div>
      </div>
    </div>
    <div class="option-block">
      <span class="bar-header">警情类型:</span>
      <div class="bar-content">
        <div class="checkbox-group">
          <div ng-repeat="(index, type) in types" class="row">
            <label class="checkbox-inline nxt-checkbox pull-left" ng-class="{'checked': haveType(type.name), 'part-checked': havePart(index, type.name)}">
              <input type="checkbox" class="form-control" ng-click="checkType(index, type.name)">&nbsp;
            </label>
            <span class="pull-left" ng-click="checkShowType(index)">
              <a href="">{{type.name}}</a>
            </span>
            <div style="height: 6px"></div>
            <div class="sub-group" ng-show="showType == index">
              <div ng-repeat="child in type.children">
                <label class="checkbox-inline nxt-checkbox" ng-class="{'checked': haveSubType(type.name, child)}">
                  <input type="checkbox" class="form-control"ng-click="checkSubType(type.name, child)">{{child}}
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="option-button">
      <button class="btn btn-blue" ng-click="submit()">开始分析</button>
    </div>
  </selector-content>
</map-selector> -->
    <div style="height: 10px"> </div>
    <map-operation ng-show="originData.length > 0">
<!--       <div class="option-block">
  <div class="bar-header">
    显示案件点: &nbsp;&nbsp;&nbsp;
    <label class="nxt-checkbox" ng-class="{'checked': option.showPoint}">
      <input type="checkbox" ng-model="option.showPoint">
      &nbsp;
    </label>
  </div>
</div> -->

      <div class="option-block">
        <span class="bar-header">空间分析单元:</span>
        <div class="bar-content">
  <!--         <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='station'}" ng-show="option.station == '海宁公安局'">
    <input type="radio" ng-model="option.spaceCell" value="station">
    <span>派出所</span>
  </label> -->
          <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='square'}">
            <input type="radio" ng-model="option.spaceCell" value="square">
            <span>方格</span>
          </label>
          <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='heatmap'}">
            <input type="radio" ng-model="option.spaceCell" value="heatmap">
            <span>密度图</span>
          </label>
          <!-- <label class="nxt-radio" ng-class="{'checked': option.spaceCell=='emphases'}">
            <input type="radio" ng-model="option.spaceCell" value="emphases">
            <span>重点场所</span>
          </label> -->
        </div>
      </div>
      <div class="option-block">
        <span class="bar-header"></span>
        <div class="bar-content" ng-show="option.spaceCell != 'heatmap'">
          
          <div class="slider" ng-show="option.spaceCell == 'square'">数&nbsp;&nbsp;&nbsp;量：{{option.number * 10}}%<input type="range" id="number" ng-model="option.number" value="option.number" max="10" min="0" class="pull-right"></div>
          <div class="slider">透明度：{{option.opacity * 10}}%<input type="range" id="opacity" ng-model="option.opacity" value="option.opacity" max="10" min="0" class="pull-right"></div>
          <div class="slider">高&nbsp;&nbsp;&nbsp;度：{{option.heightBase}}<input type="range" id="heightBase" ng-model="option.heightBase" value="option.heightBase" max="1000" min="0" class="pull-right"></div>
          <div class="slider" ng-show="option.spaceCell == 'square'">尺&nbsp;&nbsp;&nbsp;寸：{{option.size}}<input type="range" id="size" ng-model="option.size" value="option.size" max="10" min="1" class="pull-right"></div>
        </div>
      </div>
    </map-operation>
    <div style="height:10px"></div>

    <div class="selector-wrapper" ng-show="dataMap.map.length>0">
       <div class="summary-block" style="padding:0">
        <block-header>辖区统计</block-header>
        <block-content>
          <div class="info-header">
            
            <div class="col-md-4">辖区</div>
            <div class="col-md-5"></div>
            <div class="col-md-2">数量</div>
          </div>
          <div class="info-line" ng-repeat="item in xqData">
            
            <div class="col-md-4">{{item.dept}}</div>
            <div class="col-md-5">
              <div class="nxt-bar" style="width: {{item.num / xqData[0].num * 100}}%"></div>
            </div>
            <div class="col-md-2">{{item.num}}</div>
          </div>
        </block-content>
        </div>
    </div>
  </div>

  <div class="container-fluid row" ng-show="showTimeaxis()">  
    <timelineaxis >  
      <timeaxis-item ng-repeat="item in items">  
        <a href="#" ng-class="{'active': selectedItem.index == item.index}" ng-click="checkItem(item.index)">  
          <timeaxis-point></timeaxis-point>  
          <timeaxis-panel>{{item.content}}</timeaxis-panel>  
        </a>  
      </timeaxis-item>  
    </timelineaxis>  
  </div>

  <map-info class="map-info" ng-show="showInfo">
    <div class="info-table">
      <div class="table-title">警情详情</div>
      <div class="table-list">
        <div class="table-header">
          <div class="col-md-2">接警单编号</div>
          <div class="col-md-2">接警时间</div>
          <div class="col-md-2">管辖单位</div>
          <div class="col-md-2">涉案类型</div>
          <div class="col-md-2">案发地点</div>
          <div class="col-md-2">报警内容</div>
        </div>
        <div class="table-line" ng-repeat="(index, info) in details | limitTo: 10 * tparam.now | limitTo: 10 * tparam.now > tparam.total ? 10 * (tparam.now - 1) - tparam.total : - 10">
          <div class="col-md-2">{{info.JJDBH}}</div>
          <div class="col-md-2">{{info.BJSJ}}</div>
          <div class="col-md-2">{{info.bumen}}</div>
          <div class="col-md-2">{{info.BJXLMC}}</div>
          <div class="col-md-2">{{info.afdd}}</div>
          <div class="col-md-2">{{info.bjnr}}</div>
        </div>
      </div>
      <div class="table-pagination">
        <div class="table-limit pull-left">共{{tparam.total}}条记录</div>
        <div class="table-page pull-right">
          <div class="btn pagination-num pagination-left" ng-click="goPage('pre')" ng-disabled="tparam.now == 1">
            <img src="../img/left.png">
          </div>
          <div class="btn pagination-num" ng-repeat="index in tparam.pages" ng-class="{'active': index == tparam.now}" ng-click="goPage(index)">
            {{index}}
          </div>
          <div class="btn pagination-num pagination-right" ng-click="goPage('next')" ng-disabled="tparam.now == tparam.max">
            <img src="../img/right.png">
          </div>
        </div>
      </div>
    </div>
  </map-info>
  
  <div class="optional-button" ng-class="{'fold': isSummaryFold}">
    <div class="btn-group">
      <img src="img/type1.png" class="btn-bg" ng-show="mapType == 0">
      <img src="img/type2.png" class="btn-bg" ng-show="mapType == 1">
      <div class="btn btn-map" ng-click="changeMap(0)">
      </div>
      <div class="btn btn-map" ng-click="changeMap(1)">
      </div>
    </div>
    <div ng-click="flyHome()">
      <img src="img/home.png" class="btn btn-bg">
    </div>
  </div>

  <map-summary class="map-summary" ng-show="originData.length > 0">
    <summary-list>
      <summary-block>
        <block-header></block-header>
<!--         <block-header>{{selectedStation}}</block-header> -->
        <block-content>
          <div class="content-sum pull-left">
            <span class="num-pre">总警情数：</span>
          </div>
          <div class="big-num pull-left" ng-show="infoIndex < 0">
            <span>{{infoData.sum}}</span>
          </div>
          <div class="big-num pull-left" ng-hide="infoIndex < 0">
            <span>{{infoData[infoIndex].objects.length}}</span>
          </div>
<!--           <div class="num-btn">
  <button class="btn btn-blue" ng-click="">导出警情</button>
</div> -->
        </block-content>
      </summary-block>

      

<!--       <summary-block>
  <block-header>警情数量统计</block-header>
  <block-content>
    <div class="info-header">
      
      <div class="col-md-4">警情类型</div>
      <div class="col-md-5">数值</div>
      <div class="col-md-2">数量</div>
    </div>
    <div class="info-line" ng-repeat="item in dataMap.map">
      
      <div class="col-md-4">{{item.name}}</div>
      <div class="col-md-5">
        <div class="nxt-bar" style="width: {{item.value / dataMap.map[0].value * 100}}%"></div>
      </div>
      <div class="col-md-2">{{item.value}}</div>
    </div>
  </block-content>
</summary-block> -->
<!--   <summary-block ng-show="infoIndex < 0 && infoData.length > 0">
  <block-header>警情列表</block-header>
  <block-content>
    <div class="info-header">
      <div class="col-md-2">序号</div>
      <div class="col-md-3">数量</div>
      <div class="col-md-5">所在派出所</div>
      <div class="col-md-2">详情</div>
    </div>
    <div class="info-line" ng-repeat="(index, info) in infoData | limitTo: 200">
      <div class="col-md-2">
        <div class="nxt-num">{{index + 1}}</div>
      </div>
      <div class="col-md-3">{{info.value}}</div>
      <div class="col-md-5">{{info.bumen}}</div>
      <div class="col-md-2"><a href="" ng-click="showDetails(index)">详情</a></div>
    </div>
  </block-content>
  <block-content ng-show="option.spaceCell == 'square'">
    <div class="info-sum pull-left">
      <div class="num-pre litter">
        <span>方格数</span>
      </div>
      <div class="big-num">
        <span>{{infoData.length}}个</span>
      </div>
    </div>
    <div class="info-sum pull-left">
      <div class="num-pre">
        <span>方格警情数战总警情数的百分比</span>
      </div>
      <div class="big-num">
        <span>{{infoData.sum / originData.length * 100 | number: 1}}%</span>
      </div>
    </div>
  </block-content>
</summary-block>  -->
      <summary-block>
        <block-header>警情周分布</block-header>
        <block-content>
          <div id="chart2" class="nxt-chart"></div>
        </block-content>
      </summary-block>
      <summary-block ng-show="infoIndex>0">
        <div class="block-header">近12月警情分布比较图<img class="pull-right" ng-click="clickNine(-1)" src="../img/refresh.png" alt=""></div>
        <div class="block-content" style="max-height:294px">
        <div class="nine-block">
          <div class="row">
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[0]}" ng-click="clickNine(0)">1</div>
            </div>
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[1]}" ng-click="clickNine(1)">2</div>
            </div>
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[2]}" ng-click="clickNine(2)">3</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[3]}" ng-click="clickNine(3)">4</div>
            </div>
            <div class="col-md-4">
              <div class="self">5</div>
            </div>
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[4]}" ng-click="clickNine(4)">6</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[5]}" ng-click="clickNine(5)">7</div>
            </div>
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[6]}" ng-click="clickNine(6)">8</div>
            </div>
            <div class="col-md-4">
              <div ng-class="{chosen:chosenIt[7]}" ng-click="clickNine(7)">9</div>
            </div>
          </div>


        </div>
          <div id="chart3" class="nxt-chart"></div>
        </div>
      </summary-block>
    </summary-list>
  </map-summary>

</div><!-- end map-container -->